<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="search-box">
      <upNavbar
        title="设备列表"
        bgColor="#ffffff"
        titleStyle="color: #000000"
        :autoBack="false"
        leftIcon=""
      />
      <search @search="handleSearch" />
    </view>
    <view class="main">
      <view class="sidebar">
        <view
          class="nav-item"
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: currentIndex === index }"
          @click="handleNavClick(item, index)"
        >
          {{ item.name }}
        </view>
      </view>
      <!-- 右侧内容区 -->
      <view class="device-content">
        <view class="brand-header">{{ navList[currentIndex].name }}</view>
        <view class="brand-grid">
          <view
            class="brand-item"
            v-for="(brand, index) in filteredBrandList"
            :key="index"
            @click="goToDetail(brand)"
          >
            <image :src="brand.logo" mode="aspectFit" class="brand-logo" />
            <text class="brand-name">{{ brand.announceName }}</text>
          </view>
        </view>
        <up-loadmore :status="loading" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { getSearch } from "@/api/use";
import upNavbar from "@/components/navbar/index.vue";
import search from "@/components/search/index.vue";
const loading = ref<"loading" | "loadmore" | "nomore">("loadmore");
const goToDetail = (item: any) => {
  const can = JSON.stringify(item);
  uni.navigateTo({
    url: `/subPackages/deviceDetail/index?item=${encodeURIComponent(can)}`,
  });
};
const currentIndex = ref(0);
const getShopList = ref<any[]>([]);

const pagination = reactive({
  pageNum: 1,
  pageSize: 40,
  total: 0,
});
const navList = computed(() => {
  if (getShopList.value.length === 0) {
    return [{ name: "全部设备" }, { name: "无" }];
  }
  return [
    { name: "全部设备" },
    ...getShopList.value.map((item: any) => ({
      name: item.announceName,
    })),
  ];
});
const handleSearch = (value: any, isLoadMore = false) => {
  if (!isLoadMore) {
    pagination.pageNum = 1;
    getShopList.value = [];
  }
  const params = {
    pageNum: pagination.pageNum,
    pageSize: pagination.pageSize,
    context: value,
  };
  getSearch(params).then((res) => {
    const newData = res.data.content.filter(
      (item: any) =>
        !getShopList.value.some(
          (existingItem: any) => existingItem.id === item.id
        )
    );
    if (isLoadMore) {
      getShopList.value = [...getShopList.value, ...newData];
    } else {
      getShopList.value = newData;
    }

    pagination.total = res.data.totalElements;
    loading.value =
      getShopList.value.length >= pagination.total ? "nomore" : "loadmore";
  });
};
const filteredBrandList = computed(() => {
  const currentNavName = navList.value[currentIndex.value].name;
  if (currentNavName === "全部设备") {
    return getShopList.value;
  }
  return getShopList.value.filter(
    (brand: any) => brand.announceName === currentNavName
  );
});
// 点击导航切换内容
const handleNavClick = (item: any, index: number) => {
  // console.log(item.name);
  currentIndex.value = index;
};
onMounted(() => {
  pagination.pageNum = 1;
  handleSearch(null);
});
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.search-box {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 20rpx 40rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;
  z-index: 999;
}
.main {
  display: flex;
  // margin-top: 120rpx;
}
.sidebar {
  width: 180rpx;
  background-color: #f8f8f8;
}

.nav-item {
  padding: 20rpx;
  text-align: center;
  font-size: 30rpx;
  color: #333;
  cursor: pointer;
}
.active {
  background-color: #fff;
  color: #9a1e23;
}

.device-content {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  background-color: #fff;
  .brand-header {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
  margin-top: 30rpx;
}

.brand-item {
  text-align: center;
}

.brand-logo {
  width: 160rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.brand-name {
  font-size: 28rpx;
  color: #333;
}
</style>
